<template>
  <div class="home_right" id="scll">
    <div v-for="(v, i) in lists" :key="i">
      <h4 :ref="'index' + i">{{ v.title }}</h4>
      <van-card
        v-for="(item, index) in v.children"
        :key="index"
        :num="item.num"
        :price="item.num == 0 ? item.price : item.price * item.num"
        :desc="item.title"
        :title="v.title"
        :thumb="item.img"
      >
        <template #footer>
          <van-button size="mini" @click="relief(item.id)">-</van-button>
          <van-button size="mini" @click="addnum(item.id)">+</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import bus from "../utils/util";
export default {
  data() {
    return {
      scroll: "",
      index: 0,
    };
  },
  props: {
    lists: {
      type: Array, // 类型
      required: true, // 是否必须
      default: () => {
        // 返回值
        return [];
      },
    },
  },
  computed: {},

  watch: {
    index: {
      handler(newVal, oldVal) {
        this.$refs["index" + newVal][0].scrollIntoView({
          behavior: "smooth",
        });
      },
    },
  },
  methods: {
    ...mapActions("order", ["SetListAdd", "SetListRelief"]),

    // 楼层
    menu() {
      [...scll.children].forEach((item, index) => {
        if (item.offsetTop <= scll.scrollTop + 110) {
          bus.$emit("itwo", index);
        }
      });
    },
    // ++
    addnum(id) {
      this.SetListAdd(id);
    },
    // --
    relief(id) {
      this.SetListRelief(id);
    },
  },
  mounted() {
    bus.$on("index", (value) => {
      this.index = value;
    });
    scll.addEventListener("scroll", this.menu);
  },
};
</script>

<style lang="scss" scoped>
.home_right {
  width: 70%;
  height: 100%;
  overflow: auto;
  background: rgb(233, 231, 231);
}
</style>
